/**
 * Created by shaotingzhou on 2017/1/17.
 */
/**
 * Created by sww on 2016/10/20.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ListView,
    Platform,
    Image,
    ActivityIndicator,
    RefreshControl
} from 'react-native';
import {
    SwRefreshScrollView,
    SwRefreshListView,
    RefreshStatus,
    LoadMoreStatus
} from 'react-native-swRefresh'
var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar

const {width,height}=Dimensions.get('window')
export default class FBRecord extends Component{
    aryData = []
    _page=0
    _dataSource = new ListView.DataSource({rowHasChanged:(row1,row2)=>row1 !== row2})
    // 构造
    constructor(props) {

        super(props);


        // 初始状态
        this.state = {
            dataSource:this._dataSource.cloneWithRows(this.aryData)
        };
    }
    /**
     * 请求数据
     */
    requestData = () =>{
        // var url =   'http://rap.taobao.org/mockjsdata/11281/minePblish'
        var url =   'http://rap.taobao.org/mockjsdata/11281/less'
        var data = {"page":0,"size":6};
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
            .then((response) => response.json())
            .then((responseData) => {
                if (responseData) {
                    dataAry = responseData.data
                    // if(dataAry < 3){
                    //     this.refs.listView.end()
                    // }
                    global.dataLength = data.length
                    this.setState({
                        dataSource:this._dataSource.cloneWithRows(responseData.data)
                    })
                }
            }).catch((error) => {
        })
    }
    coustom = (refresStatus,offsetY)=>{
        if(refresStatus =='2'){
            return(
                <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',height:70}}>
                    <ActivityIndicator style={{marginRight:10}}>
                    </ActivityIndicator>
                    <Text>正在刷新</Text>
                </View>
            )
        }else if(refresStatus == '0'){
            return(
                <View style={{alignItems:'center',justifyContent:'center',height:70}}>
                    <Text>下拉刷新</Text>
                </View>
            )
        }else if(refresStatus == '1'){
            return(
                <View style={{alignItems:'center',justifyContent:'center',height:70}}>
                    <Text>松开刷新</Text>
                </View>
            )
        }
    }
    render(){
        return (
            <View style={{flex:1}}>
                <NavigatorBar title='我的发布'  widthWH={Platform.OS == 'ios' ? 15:15} leftBtnName = 'back' rightBtnName = 'Share_icon' leftpress={()=>this.leftAction()} rightPress={()=>this.rightAction()}  />

                <SwRefreshListView
                    dataSource={this.state.dataSource}
                    ref="listView"
                    renderRow={this._renderRow.bind(this)}
                    onRefresh={this._onListRefersh.bind(this)}
                    onLoadMore={this._onLoadMore.bind(this)}
                    pusuToLoadMoreTitle="上拉加载更多"
                    loadingTitle="正在加载"
                    noMoreDataTitle="无更多数据"
                    customRefreshView={(refresStatus,offsetY)=>this.coustom(refresStatus,offsetY)}
                    customRefreshViewHeight={70}
                />
            </View>

        );
    }
    /**
     * 返回到上一级
     */
    leftAction =() =>{
        this.props.navigator.pop();
    }
    rightAction = () =>{

    }
    _renderRow(rowData) {
        let type = rowData.type;
        if(type===1){//已发布
            return(
                <View style={styles.container}>

                    <View style={styles.divides}/>

                    <View style={styles.contentStyle}>
                        <View style={styles.titlecontentStyle}>
                            <Text style={styles.titleStyle}>{rowData.title}</Text>
                            <Image source={{uri:'released'}} style={styles.typeStyle}/>
                        </View>

                        <View style={styles.myStyleone}>
                            {/*--产区--*/}
                            <View style={styles.regionStyle}>
                                <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                <Text style={styles.nameStyle}>产区</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--数量--*/}
                            <View style={styles.numberStyle}>
                                <Text style={styles.valueStyle}>{rowData.number}</Text>
                                <Text style={styles.nameStyle}>数量</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--年份--*/}
                            <View style={styles.yearStyle}>
                                <Text style={styles.valueStyle}>{rowData.year}</Text>
                                <Text style={styles.nameStyle}>年份</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--价格--*/}
                            <View style={styles.priceStyle}>
                                <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                            </View>
                        </View>

                    </View>
                </View>

            );
        }else if (type ===2){//审核中
            return(
                <View style={styles.container}>

                    <View style={styles.divides}/>

                    <View style={styles.contentStyle}>
                        <View style={styles.titlecontentStyle}>
                            <Text style={styles.titleStyle}>{rowData.title}</Text>
                            <Image source={{uri:'examine'}} style={styles.typeStyle}/>
                        </View>

                        <View style={styles.myStyleone}>
                            {/*--产区--*/}
                            <View style={styles.regionStyle}>
                                <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                <Text style={styles.nameStyle}>产区</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--数量--*/}
                            <View style={styles.numberStyle}>
                                <Text style={styles.valueStyle}>{rowData.number}</Text>
                                <Text style={styles.nameStyle}>数量</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--年份--*/}
                            <View style={styles.yearStyle}>
                                <Text style={styles.valueStyle}>{rowData.year}</Text>
                                <Text style={styles.nameStyle}>年份</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--价格--*/}
                            <View style={styles.priceStyle}>
                                <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                            </View>
                        </View>

                    </View>
                </View>

            );

        }else if (type ===3){//已失效

            return(
                <View style={styles.container}>

                    <View style={styles.divides}/>

                    <View style={styles.contentStyle}>
                        <View style={styles.titlecontentStyle}>
                            <Text style={styles.titleStyle}>{rowData.title}</Text>
                            <Image source={{uri:'expired'}} style={styles.typeStyle}/>
                        </View>

                        <View style={styles.myStyleone}>
                            {/*--产区--*/}
                            <View style={styles.regionStyle}>
                                <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                <Text style={styles.nameStyle}>产区</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--数量--*/}
                            <View style={styles.numberStyle}>
                                <Text style={styles.valueStyle}>{rowData.number}</Text>
                                <Text style={styles.nameStyle}>数量</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--年份--*/}
                            <View style={styles.yearStyle}>
                                <Text style={styles.valueStyle}>{rowData.year}</Text>
                                <Text style={styles.nameStyle}>年份</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--价格--*/}
                            <View style={styles.priceStyle}>
                                <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                            </View>
                        </View>

                    </View>
                </View>

            );

        }else if (type ===4){//已拒绝

            return(
                <View style={styles.container}>

                    <View style={styles.divides}/>

                    <View style={styles.contentStyle}>
                        <View style={styles.titlecontentStyle}>
                            <Text style={styles.titleStyle}>{rowData.title}</Text>
                            <Image source={{uri:'rejected'}} style={styles.typeStyle}/>
                        </View>

                        <View style={styles.myStyleone}>
                            {/*--产区--*/}
                            <View style={styles.regionStyle}>
                                <Text style={styles.valueStyle}>{rowData.origin}</Text>
                                <Text style={styles.nameStyle}>产区</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--数量--*/}
                            <View style={styles.numberStyle}>
                                <Text style={styles.valueStyle}>{rowData.number}</Text>
                                <Text style={styles.nameStyle}>数量</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--年份--*/}
                            <View style={styles.yearStyle}>
                                <Text style={styles.valueStyle}>{rowData.year}</Text>
                                <Text style={styles.nameStyle}>年份</Text>
                            </View>
                            <View style={styles.divide}/>
                            {/*--价格--*/}
                            <View style={styles.priceStyle}>
                                <Text style={styles.pricevalueStyle}>{rowData.price}</Text>
                            </View>
                        </View>

                    </View>
                </View>

            );
        }

    }


    /**
     * 模拟刷新
     * @param end
     * @private
     */
    _onListRefersh(end){
        // alert('FBRecord页面的下拉')

        let timer =  setTimeout(()=>{
            clearTimeout(timer)
            this.requestData();
            // this.refs.listView.resetStatus() //重置上拉加载的状态

            end()//刷新成功后需要调用end结束刷新
            // this.refs.listView.endRefresh() //建议使用end() 当然 这个可以在任何地方使用
        },1500)
    }

    /**
     * 模拟加载更多
     * @param end
     * @private
     */
    _onLoadMore(end){
        let timer =  setTimeout(()=>{
            clearTimeout(timer)
            this.requestData();


            end()
            this.refs.listView.endLoadMore(1)
        },2000)
    }

    componentDidMount() {
        let timer = setTimeout(()=>{
            this.requestData();
            clearTimeout(timer)
            this.refs.listView.beginRefresh()
            this.refs.listView.endRefresh()
        },500) //自动调用刷新 新增方法
    }

}
const styles=StyleSheet.create({
    container:{

    },
    content:{
        width:width,
        height:height,
        backgroundColor:'yellow',
        justifyContent:'center',
        alignItems:'center'
    },
    cell:{
        height:100,
        backgroundColor:'purple',
        alignItems:'center',
        justifyContent:'center',
        borderBottomColor:'#ececec',
        borderBottomWidth:1

    },
    divides:{
        height:8
    },
    titlecontentStyle:{
        justifyContent:'space-between',
        flexDirection:'row',
    },
    titleStyle:{
        marginTop:18,
        marginLeft:10,
        fontSize:15,
        fontWeight:'bold',
        color:'#333333'
    },
    typeStyle:{
        width:61,
        height:47,
        marginRight:10
    },
    divide:{
        width:1,
        height:32,
        backgroundColor:'#999'
    },
    numberStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },
    valueStyle:{
        fontSize:14,
        color:'#666666'
    },
    yearStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },
    nameStyle:{
        fontSize:12,
        color:'#999999',
        marginTop:3
    },
    pricevalueStyle:{
        fontSize:16,
        color:'#8B0000'
    },
    priceStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        flex:1,
    },
    contentStyle:{
        borderWidth:1,
        borderColor:'#e5e5e5',
        backgroundColor:'#fff',
        marginLeft:10,
        marginRight:10,
    } ,
    regionStyle:{
        justifyContent: 'center',
        alignItems: 'center',
        width:75,
    },
    myStyleone:{
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
        height:55,
        marginBottom:10
    }


})
